<template>
  <div class="detail-personal">
    <el-row>
      <el-col :span="6" :xs="24" class="detail-personal-avatar">
        <img src="../../../static/bg-img/b6.jpg"/>
      </el-col>
      <el-col :span="18" :xs="24">
        <div class="card-image-text-textbox">
          <!--card-image-text-->
          <div class="card-text">
            <div class="news-item-text">
              <div class="news-item-line"></div>
              <div class="news-item-tag">
                author
              </div>
              <h4 class="news-item-title">
                Welcome to this Lifestyle blog
              </h4>
              <p class="news-item-content">
                Curabitur venenatis efficitur lorem sed tempor. Integer aliquet tempor cursus. Nullam vestibulum convallis risus
                vel condimentum. Nullam auctor lorem in libero luctus, vel volutpat quam tincidunt. Morbi sodales, dolor id
                ultricies dictum
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'detail-personal'
}
</script>

<style scoped lang="less">
.detail-personal{
  margin: 40px 0px;
  padding: 20px 0px;
  border-bottom: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  .detail-personal-avatar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    img{
      text-align: center;
      width: 50%;
      height: 50%;
      border-radius: 100%;
    }
  }
  .card-image-text-textbox{
    padding: 3%;
    .card-text {
      .news-item-line {
        width: 26px;
        height: 2px;
        background: #c8c8c8;
        margin-bottom: 20px;
      }
      .news-item-tag {
        color: #a1a1a1;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 10px;
        display: block;
      }
      .news-item-title {
        display: inline-block;
        color: #000000;
        font-size: 24px;
        margin-bottom: 30px;
      }
      .news-item-tag:hover{
        color: #000000;
        transition: color .15s ease-in-out;
      }
      .news-item-title:hover{
        color: #30336b;
        transition: color .15s ease-in-out;
      }
      .news-item-content {
        color: #878787;
        font-size: 14px;
        line-height: 2;
      }
    }
  }
}
</style>
